import React,{ useState} from 'react'
import { WingBlank } from 'antd-mobile';
import SwiperCore, {Pagination, A11y,Autoplay} from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
import 'swiper/swiper.scss';
SwiperCore.use([ Pagination, A11y,Autoplay]);
function Index() {
    const arr = [
        {
            id:1,
            name:"全部",
            title:"猜你喜欢"
        },{
            id:2,
            name:"时令",
            title:"当季优选"
        },{
            id:3,
            name:"进口",
            title:"国际直采"
        },{
            id:4,
            name:"人气",
            title:"大家都在买"
        }
    ]
    const [list,setList] = useState(arr)
    const PlaceHolder = ({ className = '', ...restProps }) => (
        <div className={`${className} placeholder`} {...restProps}>
            <Swiper
                className="bannar"
                spaceBetween={50}
                slidesPerView={1}
                // onSlideChange={() => console.log('slide change')}
                // onSwiper={(swiper) => console.log(swiper)}
                pagination={{ clickable: true }}
                autoplay={true}
                loop={true}

            >
                <SwiperSlide className="item">Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>       
            </Swiper>
            <div className="type">
                {
                    list.map((item,index)=>{
                        return (
                            <div key={index} className="item">
                                <h3 className="name">
                                    {item.name}
                                </h3>
                                <span className="title">
                                    {item.title}
                                </span>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
    return (
        <div className="home">
            <div className="header">
                <select>
                    <option>北京</option>
                    <option>天津</option>
                    <option>上海</option>
                </select>
                <div className="search">
                    <span className="iconfont icon-sousuo"></span>
                    <input type="text" />
                </div>
                <span className="iconfont icon-weizhi"></span>
            </div>
            <WingBlank className="Middle">
                <PlaceHolder />
            </WingBlank>
        </div>
    )
}

export default Index
